<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>员工管理</el-breadcrumb-item>
		</el-breadcrumb>


		<el-card>
			<!-- 多条件查询 -->
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="姓名">
					<el-input v-model="formInline.LoginName"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="formInline.IsLockout">
						<el-option label="请选择" value=""></el-option>
						<el-option label="已锁定" value="1"></el-option>
						<el-option label="未锁定" value="0"></el-option>
						<!-- <el-option :label="item.IsLockout" v-for="item in stutaslist" :value="item.IsLockout"></el-option> -->
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="onSubmit">搜索</el-button>
				</el-form-item>
			</el-form>
			<el-form>
				<el-form-item>
					<el-button type="primary" round @click="adddialogFormVisible=true">添加用户</el-button>
				</el-form-item>
			</el-form>
			<!-- 表格 -->

			<el-table :data="stafflist" border stripe>
				<el-table-column label="编号" prop="Id"></el-table-column>
				<el-table-column label="登录名" prop="LoginName"></el-table-column>
				<el-table-column label="邮箱" prop="ProtectEmail"></el-table-column>
				<el-table-column label="手机号" prop="ProtectMTel"></el-table-column>
				<el-table-column label="是否锁定" prop="IsLockout">
					<template v-slot="scope">
						<el-tooltip content="绿:锁定 红:未锁定" placement="top">
							<el-switch v-model="scope.row.IsLockout" active-color="#13ce66" inactive-color="#ff4949" @change="changeStatus(scope.row)"
							 :active-value="1" :inactive-value="0"></el-switch>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="CreateTime"></el-table-column>
				</el-table-column>
				<el-table-column label="锁定时间" prop="LockTime">
				</el-table-column>
				<el-table-column label="操作" width="350px">
					<template slot-scope="scope">
						<el-button type="warning" size="mini" icon="el-icon-setting" @click="setRole(scope.row)">角色</el-button>
						<el-button type="success" size="mini" icon="el-icon-edit" @click="update(scope.row)">修改</el-button>
						<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById(scope.row.Id)">删除</el-button>
						<el-button type="primary" size="mini" icon="el-icon-lock" @click="resetById(scope.row)">重置</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
			 :page-sizes="[5, 10, 15, 20]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="count">
			</el-pagination>
			<!-- 添加对话框 -->
			<el-dialog title="添加用户" :visible.sync="adddialogFormVisible" @close="closeDialog">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="用户名称" :label-width="formLabelWidth" prop="LoginName">
						<el-input v-model="ruleForm.LoginName"></el-input>
					</el-form-item>
					<el-form-item label="用户密码" :label-width="formLabelWidth" prop="LoginName">
						<el-input v-model="ruleForm.Password" type="password"></el-input>
					</el-form-item>
					<el-form-item label="用户邮箱" :label-width="formLabelWidth" prop="ProtectEmail">
						<el-input v-model="ruleForm.ProtectEmail"></el-input>
					</el-form-item>
					<el-form-item label="用户手机" :label-width="formLabelWidth" prop="ProtectMTel">
						<el-input v-model="ruleForm.ProtectMTel"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="canselSubmit">取 消</el-button>
					<el-button type="primary" @click="submitAdd">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 编辑对话框 -->
			<el-dialog title="编辑用户" :visible.sync="editdialogFormVisible">
				<el-form :model="editform">
					<el-form-item label="用户名" :label-width="formLabelWidth">
						<el-input v-model="editform.LoginName" autocomplete="off" disabled></el-input>
					</el-form-item>
					<el-form-item label="用户电话" :label-width="formLabelWidth">
						<el-input v-model="editform.ProtectMTel" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="用户邮箱" :label-width="formLabelWidth">
						<el-input v-model="editform.ProtectEmail" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="canselSubmit">取 消</el-button>
					<el-button type="primary" @click="submitUpdate">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 分配角色的对话框 -->
			<el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%" @close="setRoleDialogClosed">
				<div>
					<p>当前的用户:{{userInfo.LoginName}}</p>
					<!-- <p>当前的角色:{{userInfo.role_name}}</p> -->
					<p>分配角色:
						<el-transfer @change="changde" v-model="value" :titles="title" :props="{
									                  key: 'Id',
									                  label: 'Name'
									                }"
						 :data="rolesList">
						</el-transfer>
					</p>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="setRoleDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveRoleInfo">确 定</el-button>
				</span>
			</el-dialog>

		</el-card>
	</div>


</template>

<script>
	export default {
		data() {
			//验证邮箱的规则		
			var checkEmail = (rule, value, cb) => {
				//验证邮箱的正则表达式		
				const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
				if (regEmail.test(value)) {
					//合法的邮箱			
					return cb()
				}
				cb(new Error('请输入合法的邮箱'))
			}
			//验证手机号规则		
			var checkMobile = (rule, value, cb) => {
				const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
				if (regMobile.test(value)) {
					//合法的手机号			
					return cb()
				}
				cb(new Error('请输入合法的手机号'))
			}
			return {
				rolesList: [],
				selectedRoleId: '',
				title: ["系统所有角色", "当前所有角色"],
				value: [],
				datas: {},
				userId: '',
				userInfo: {},
				setRoleDialogVisible: false,
				formInline: {
					LoginName: '',
					IsLockout: ''
				},
				userId: '',
				stafflist: [],
				stutaslist: [],
				dialogRolesFormVisible: false,
				page: 1,
				limit: 10,
				count: 0,
				adddialogFormVisible: false,
				ruleForm: {
					LoginName: '',
					Password: '',
					ProtectEmail: '',
					ProtectMTel: ''
				},
				formLabelWidth: '120px',
				editdialogFormVisible: false,
				editform: {
					LoginName: '',
					IsLockout: '',
					ProtectMTel: '',
					ProtectEmail: ''
				},
				rules: {
					LoginName: [{
							required: true,
							message: '请输入用户登陆名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 2 到 10 个字符',
							trigger: 'blur'
						}
					],
					ProtectEmail: [{
						required: true,
						message: '请输入用户邮箱',
						trigger: 'blur'
					}, {
						validator: checkEmail,
						trigger: 'blur'
					}],
					ProtectMTel: [{
						required: true,
						message: '请输入用户手机',
						trigger: 'blur'
					}, {
						validator: checkMobile,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			//展示分配角色的对话框
			async setRole(row) {
				this.userInfo = row
				// console.log(this.userInfo)
				//在展示对话框之前，获取所有角色的列表
				const {
					data: res
				} = await this.$http.get('/api/api/Home/GetAllRoles')
				if (res.code !== 0) {
					return this.$message.error('获取全部角色列表失败！')
				}
				// console.log(res.data)
				this.rolesList = res.data
				const {
					data: ress
				} = await this.$http.post('/api/api/Home/GetMyRoles', this.userInfo)
				if (res.code !== 0) {
					return this.$message.error('获取角色列表失败！')
				}
				this.value = ress.data;
				this.setRoleDialogVisible = true
			},
			//点击按钮 ，分配角色
			async saveRoleInfo() {				
				const {
					data: res
				} = await this.$http.get('/api/api/Home/EditMR', {
					params: {
						Id: this.userInfo.Id,
						Value: this.value.toString()
					}
				})
				// console.log(res)
				if (res.code !== 0) {
					return this.$message.error('更新角色失败！')
				}
				this.$message.success('更新角色成功！')
				//刷新数据列表
				this.getStaffList();
				//隐藏对话框
				this.setRoleDialogVisible = false
			},
			changde() {
				console.log(this.value)
			},
			//监听分配角色对话框的关闭事件
			setRoleDialogClosed() {
				this.selectedRoleId = ''
				this.userInfo = {}
			},
			canselSubmit() {
				this.editdialogFormVisible = false,
					this.adddialogFormVisible = false,
					this.getStaffList(),
					this.editform = {}
			},
			closeDialog() {
				this.form = {}

			},
			//重置操作ResetPsw
			async resetById(row) {
				const {
					data: res
				} = await this.$http.post('/api/api/Home/ResetPsw', row);
				if (res.code !== 0) {
					this.$message.error(res.msg);
				}
				this.$message.success(res.msg);
				this.getStaffList();
			},
			//监听switch开关状态的改变
			async changeStatus(row) {
				this.switchrow = row;
				const {
					data: res
				} = await this.$http.post('/api/api/Home/Idlockout', this.switchrow);
				if (res.code !== 0) {
					this.$message.error(res.msg);
				}
				this.$message.success(res.msg);
				this.getStaffList();
			},
			//根据id删除
			async removeById(Id) {
				const confirmResult =
					await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).catch(err => err)
				console.log(confirmResult)
				if (confirmResult !== 'confirm') {
					return this.$message.info('已取消删除')
				}
				const {
					data: res
				} = await this.$http.delete('/api/api/Home/DeleteEmpUser?id=' + Id)
				if (res.code !== 0) {
					return this.$message.error(res.msg);
				}
				this.$message.success(res.msg);
				this.getStaffList();
			},
			//编辑
			update(row) {
				this.editdialogFormVisible = true;
				this.editform = row;
			},
			async submitUpdate() {
				const {
					data: res
				} = await this.$http.post('/api/api/Home/UpdateEmpUser', this.editform)
				console.log(res)
				if (res.code !== 0) {
					return this.$message.error(res.msg);
				}
				this.editdialogFormVisible = false;
				this.getStaffList();
				this.$message.success(res.msg)
			},
			// 提交添加
			async submitAdd() {
				const {
					data: res
				} = await this.$http.post('/api/api/Home/AddEmpUser', this.ruleForm)
				console.log(res)
				if (res.code !== 0) {
					return this.$message.error(res.msg);
				}
				this.adddialogFormVisible = false;
				this.getStaffList();
				this.$message.success(res.msg)
			},

			onSubmit: function() {
				this.getStaffList();
			},
			handleSizeChange(val) {
				this.limit = val;
				this.getStaffList();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getStaffList();
			},
			async getStatusList() {
				const {
					data: res
				} = await this.$http.get('/api/api/Home/GetStatusList')

				if (res.code !== 0) {
					return this.$message.error("获取列表失败");
				}
				this.stutaslist = res.data
			},
			async getStaffList() {
				const {
					data: res
				} = await this.$http.get('/api/api/Home/GetDataList', {
					params: {
						page: this.page,
						limit: this.limit,
						LoginName: this.formInline.LoginName,
						IsLockout: this.formInline.IsLockout
					}
				})
				// console.log(res.code)
				if (res.code !== 0) {
					return this.$message.error("获取用户列表失败");
				}
				this.stafflist = res.data
				this.count = res.count
			},
		},
		created() {
			this.getStaffList();
			this.getStatusList()
		}
	}
</script>

<style>

</style>
